<template>
  <div class="home" style="width: 100%; padding: 10px">
    <div style="margin: 10px 0;">
<!--      <h1 style="text-align: center">相关数据上传</h1>-->
      <h1 style="text-align: center">请选择需要上传的Excel文件</h1>
    </div>

    <div style="display: flex; flex-wrap: wrap; gap: 20px; margin-top: 30px;">
      <!-- 网购信息上传卡片 -->
      <el-card class="upload-card" style="width: 300px;">
        <template #header>
          <div class="clearfix" style="text-align: center">
            <span>网购信息上传</span>
          </div>
        </template>
        <div style="text-align: center;">
          <p>(外卖调征-手机号查订单表)</p>
          <el-upload
              class="upload-demo"
              drag
              action="/api/excel/meituanInfo"
              :on-success="handleSuccess"
              :on-error="handleError"
              :show-file-list="false"
              accept=".xlsx,.xls"
          >
            <i class="el-icon-upload"></i>
            <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
            <div class="el-upload__tip" slot="tip">
              只能上传xlsx/xls的excel文件，且不超过10MB
            </div>
          </el-upload>
          <!-- 示例文件下载链接 -->
          <div style="margin-top: 15px; font-size: 14px;">
            <el-link type="primary" :underline="false" @click="downloadSample">
              <i class="el-icon-download"></i> 下载示例文件
            </el-link>
          </div>
        </div>

      </el-card>
    </div>

    <!-- 上传结果提示 -->
    <el-dialog
        title="上传结果"
        v-model="resultDialogVisible"
        width="30%"
    >
      <span>{{ uploadResultMessage }}</span>
      <template #footer>
        <span class="dialog-footer">
          <el-button type="primary" @click="resultDialogVisible = false">确 定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>


<!-- 可以添加更多上传类型卡片 -->
<!--
<el-card class="upload-card" style="width: 300px;">
  <div slot="header" class="clearfix">
    <span>其他数据上传</span>
  </div>
  <div style="text-align: center;">
    <p>上传其他相关数据</p>
    <el-upload
      class="upload-demo"
      drag
      action="/api/excel/otherInfo"
      :on-success="handleSuccess"
      :on-error="handleError"
      :show-file-list="false"
      accept=".xlsx,.xls"
    >
      <i class="el-icon-upload"></i>
      <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
      <div class="el-upload__tip" slot="tip">
        只能上传xlsx/xls文件，且不超过10MB
      </div>
    </el-upload>
  </div>
</el-card>
-->


<script>
export default {
  name: 'ExcelUpload',
  data() {
    return {
      resultDialogVisible: false,
      uploadResultMessage: ''
    };
  },
  methods: {
    handleSuccess(response, file, fileList) {
      console.log('实际响应数据:', response);
      console.log('response.success:', response.success);
      console.log('response.dataCount:', response.dataCount);

      if (response.success) {
        this.uploadResultMessage = `上传成功！共处理 ${response.dataCount} 条数据`;
      } else {
        this.uploadResultMessage = `上传失败：${response.message}`;
      }
      this.resultDialogVisible = true;
    },
    handleError(err, file, fileList) {
      this.uploadResultMessage = '上传过程中发生错误，请稍后重试';
      this.resultDialogVisible = true;
      console.error('上传错误:', err);
    },
    // 下载示例文件
    downloadSample() {
      // 方式1: 下载public目录下的文件
      const link = document.createElement('a');
      link.href = '/api/meituaninfo.xlsx'; // 示例文件路径
      link.download = '网购信息上传示例.xlsx';
      link.click();
    }
  }
};
</script>

<style scoped>
.upload-card {
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
}

.upload-demo {
  margin-top: 20px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}
</style>
